<template>
    <div>
        <!-- 搜索 -->
        <div ref="searchBar" id="searchBar" class="home-search">
            <div @click="loginShow = !loginShow">
                <img src="../../assets/img/banner.png" alt />
            </div>
            <div @click="$router.push({name:'homeSearch'})">
                <span class="fa fa-search"></span>
                <input type="text" placeholder="国家/城市/项目名" />
                <span>房源/STO</span>
            </div>
            <div @click="$router.push({name:'message'})">
                <img src="../../assets/img/tixing.png" alt />
            </div>
        </div>
        <div class="scroll-range" ref="wrapper" style="height:85vh">
            <mt-loadmore
                :top-method="loadTop"
                @top-status-change="handleTopChange"
                :autoFill="false"
                ref="loadmore"
            >
                <!-- 轮播 -->
                <div class="table">
                    <div class="swiper-container1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="swiper-center-img">
                                    <img src="../../assets/img/bg2.png" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="swiper-center-img">
                                    <img src="../../assets/img/bg2.png" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="swiper-center-img">
                                    <img src="../../assets/img/bg2.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 房租 -->
                <div class="earning">
                    <div class="earning-left">
                        <div>
                            <img src="../../assets/img/jinbi.png" alt />
                            <span>房租收益</span>
                        </div>
                        <div>历史收益</div>
                        <div>
                            <span>200000</span>
                            <img src="../../assets/img/USDT.png" alt />
                            <span>≈￥200000</span>
                        </div>
                        <div>
                            <span>昨日收益</span>
                            <span>+ 200000</span>
                            <img src="../../assets/img/shangsheng.png" alt />
                        </div>
                    </div>
                    <div class="earning-right">
                        <div>
                            <img src="../../assets/img/jinbi.png" alt />
                            <span>推广收益</span>
                        </div>
                        <div>历史收益</div>
                        <div>
                            <span>200000</span>
                            <img src="../../assets/img/USDT.png" alt />
                            <span>≈￥200000</span>
                        </div>
                        <div>
                            <span>当月收益</span>
                            <span>+ 200000</span>
                            <img src="../../assets/img/shangsheng.png" alt />
                        </div>
                    </div>
                </div>
                <!-- 通知 -->
                <div class="ask-you">
                    <div>
                        <img src="../../assets/img/tongzhi.png" alt />
                        <span>618更新维护通知</span>
                    </div>
                    <img src="../../assets/img/more-tongzhi.png" alt />
                </div>
                <!-- 头条 -->
                <div class="title-news">
                    <div>
                        资讯
                        <br />头条
                    </div>
                    <div>
                        <div class="swiper-container2">
                            <div class="swiper-wrapper swiper-no-swiping">
                                <div class="swiper-slide">ERC-1155成为以太坊正式代币标准</div>
                                <div class="swiper-slide">ERC-1155成为以太坊正式代币标准</div>
                                <div class="swiper-slide">ERC-1155成为以太坊正式代币标准</div>
                            </div>
                        </div>
                    </div>
                    <img src="../../assets/img/more-zixun.png" alt />
                </div>
                <!-- 标题 -->
                <div class="title">
                    <span>优质房源推荐</span>
                    <div>
                        <span>查看更多</span>
                        <img src="../../assets/img/more-tongzhi.png" alt />
                    </div>
                </div>
                <!-- house轮播 -->
                <div class="house-show">
                    <mt-swipe class="house-scroll" :auto="4000">
                        <mt-swipe-item>
                            <div class="house-scroll-img">
                                <img src="../../assets/img/bg2.png" />
                            </div>
                            <div class="house-msg">
                                <div>
                                    <span>￥4000.000</span>
                                    <span>30%首付</span>
                                </div>
                                <div>距东南亚最大购物中心零距离</div>
                                <div>
                                    <img src="../../assets/img/dingwei.png" alt />
                                    <span>泰国曼谷</span>
                                </div>
                            </div>
                        </mt-swipe-item>
                        <mt-swipe-item>
                            <div class="house-scroll-img">
                                <img src="../../assets/img/bg2.png" />
                            </div>
                            <div class="house-msg">
                                <div>
                                    <span>￥4000.000</span>
                                    <span>30%首付</span>
                                </div>
                                <div>距东南亚最大购物中心零距离</div>
                                <div>
                                    <img src="../../assets/img/dingwei.png" alt />
                                    <span>泰国曼谷</span>
                                </div>
                            </div>
                        </mt-swipe-item>
                    </mt-swipe>
                </div>
                <!-- 标题 -->
                <div class="title">
                    <span>最新项目</span>
                    <div>
                        <span>查看更多</span>
                        <img src="../../assets/img/more-tongzhi.png" alt />
                    </div>
                </div>
                <!-- 最新项目 -->
                <div class="recently-product">
                    <img src="../../assets/img/bg2.png" alt />
                </div>
                <!-- 标题 -->
                <div class="title">
                    <span>最新资讯</span>
                    <div>
                        <span>查看更多</span>
                        <img src="../../assets/img/more-tongzhi.png" alt />
                    </div>
                </div>
                <!-- 最新资讯 -->
                <div class="recently-news">
                    <div class="recently-news-list">
                        <div class="recently-news-list-left">
                            <img src="../../assets/img/bg.png" alt />
                        </div>
                        <div class="recently-news-list-right">
                            <div>国际学校配套加码</div>
                            <div>曼谷枫丹公馆</div>
                            <div>
                                <img src="../../assets/img/kanguo.png" alt />
                                <span>96人看过</span>
                                <span>|</span>
                                <img src="../../assets/img/shijian.png" alt />
                                <span>2019-06-19</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div slot="top" class="mint-loadmore-top">
                    <span
                        v-show="topStatus !== 'loading'"
                        :class="{ 'rotate': topStatus === 'drop' }"
                    >
                        <img class="Rotation" src="../../assets/img/chongbi.png" />
                    </span>
                    <span v-show="topStatus === 'loading'">
                        <img class="Rotation" src="../../assets/img/fabi.png" />
                    </span>
                </div>
            </mt-loadmore>
        </div>
        <!-- 菜单栏 -->
        <div class="login-bg" v-show="loginShow" @click.stop="loginShow =! loginShow"></div>
        <transition name="login">
            <homeNav v-show="loginShow"></homeNav>
        </transition>
    </div>
</template>
<script>
import { Indicator } from "mint-ui";
import baseJs from "../../assets/js/base";
import homeNav from "./homeNav";
export default {
    name:"home",
    data() {
        return {
            //登录菜单切换
            loginShow: false,
            //加载
            pageNum: 0,
            topStatus: ""
        };
    },
    created() {
        // setTimeout(() =>{
        //     this.$store.commit('changeStatusBall',false)
        // },3000)
    },
    mounted() {
        baseJs.bannerNewsScroll();
        baseJs.bannerScroll();
    },
    components: {
        homeNav
    },
    methods: {
        //下拉刷新
        handleTopChange(status) {
            this.topStatus = status;
        },
        loadTop() {
            setTimeout(() => {
                this.$refs.loadmore.onTopLoaded();
            }, 1000);
        }
    }
};
</script>
<style lang="less" scoped>
//搜索
.home-search {
    // position: fixed;
    // left: 0;
    // top:0;
    // width: 100%;
    // background-color: @white;
    // z-index: 3;
    .flexAroundCenter();
    height: 7vh;
    box-shadow: 0 0 5px 1px #eee;
    color: @bgcolor;
    div:first-child {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        .flexCenter();
        align-content: center;
    }
    div:nth-child(2) {
        .flexAroundCenter();
        font-size: 12px;
        width: 75%;
        height: 30px;
        padding: 0 8px;
        background-color: #eee;
        border-radius: 10px;
        color: @word3;
        span:first-child {
            font-size: 16px;
        }
        input {
            width: 50%;
            background-color: #eee !important;
            border: none;
            padding-left: 4px;
            font-size: 10px;
            color: @word3;
        }
        span:nth-child(3) {
            border-left: 1px solid #ccc;
            padding-left: 10px;
        }
    }
    div:nth-child(3) {
        width: 20px;
        .flexCenterCenter();
        img {
            width: 100%;
        }
    }
}
//轮播
.table {
    margin: 10px 0 10px;
    .swiper-center-img {
        width: 100%;
        height: 140px;
        border-radius: 10px;
        overflow: hidden;
        img {
            height: 100%;
        }
    }
}
.earning {
    padding: 0 15px;
    .flexBetween();
    margin: 15px 0;
    > div {
        width: 49%;
        background-color: #e2f0fd;
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 4px 10px 0px #eee;
        > div:nth-child(1) {
            .flexStartCenter();
            font-size: 12px;
            color: @blueColor10;
            font-weight: bold;
            img {
                width: 15px;
                margin-right: 4px;
            }
        }
        > div:nth-child(2) {
            color: @blackColor5;
            font-size: 10px;
            text-align: left;
            margin: 4px 0;
        }
        > div:nth-child(3) {
            text-align: left;
            color: @blueColor10;
            font-size: 16px;
            margin: 4px 0;
            img {
                width: 10px;
            }
            span:nth-child(3) {
                font-size: 8px;
                color: @blackColor5;
            }
        }
        > div:nth-child(4) {
            font-size: 10px;
            color: @blueColor5;
            span:nth-child(2) {
                font-size: 14px;
                color: @blackColor5;
                margin-left: 10px;
            }
            img {
                width: 13px;
            }
        }
    }
    .earning-right {
        background-color: #e3ebfe;
    }
}
.ask-you {
    padding: 10px 15px 10px;
    .flexBetweenCenter();
    font-size: 14px;
    div:nth-child(1) {
        .flexStartCenter();
        color: @blueColor10;
        img {
            width: 18px;
            margin-right: 8px;
        }
    }
    img {
        width: 8px;
    }
}
.title-news {
    .flexBetweenCenter();
    width: 100%;
    height: 70px;
    background-color: @blueColor1;
    padding: 0 30px;
    overflow: hidden;
    margin: 15px 0;
    > div:first-child {
        font-size: 15px;
        font-weight: bold;
        color: @blueColor5;
    }
    > div:nth-child(2) {
        width: 70%;
        overflow: hidden;
        height: 70px;
        margin-top: 50px;
        font-size: 14px;
        color: @blueColor10;
    }
    img {
        width: 8px;
    }
}
.title {
    .flexBetweenCenter();
    padding: 0 15px 15px;
    font-size: 18px;
    font-weight: bold;
    color: @blackColor10;
    div:nth-child(2) {
        .flexBetweenCenter();
        font-size: 12px;
        color: @blackColor5;
        img {
            width: 6px;
            margin-left: 4px;
        }
    }
}
.house-show {
    margin-bottom: 10px;
    .house-scroll {
        height: 240px;
        position: relative;
        .house-scroll-img {
            width: 100%;
            height: 180px;
            .flexCenter();
            img {
                height: 100%;
            }
        }
        .house-msg {
            position: absolute;
            left: 5%;
            top: 150px;
            width: 90%;
            height: 80px;
            background-color: @white;
            box-shadow: 0 0 5px 1px #eee;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            div:nth-child(1) {
                flex: 1;
                font-size: 17px;
                .flexBetweenCenter();
                color: @blackColor10;
                font-weight: bold;
                span:nth-child(2) {
                    font-size: 11px;
                    color: @white;
                    font-weight: normal;
                    background-color: @blueColor4;
                    padding: 2px 4px;
                    border-radius: 4px;
                }
            }
            div:nth-child(2) {
                flex: 1;
                font-size: 14px;
                color: @blueColor10;
            }
            div:nth-child(3) {
                flex: 1;
                .flexStartCenter();
                img {
                    width: 10px;
                    margin-right: 4px;
                }
                span {
                    font-size: 11px;
                    color: @blackColor5;
                }
            }
        }
    }
}
.recently-product {
    width: 90%;
    height: 150px;
    margin: 0 auto 15px;
    border-radius: 10px !important;
    overflow: hidden;
}
.recently-news {
    padding: 0 15px;
    .recently-news-list {
        .flexStart();
        height: 120px;
        padding: 0 0 10px;
        border-bottom: 1px solid @blackColor3;
        .recently-news-list-left {
            width: 40%;
            .flexCenter();
            align-content: center;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 10px;
        }
        .recently-news-list-right {
            width: 60%;
            height: 100px;
            font-size: 16px;
            font-weight: bold;
            color: @blackColor8;
            .flexColumn();
            > div {
                .flexStartCenter;
            }
            div:nth-child(1) {
                flex: 1;
            }
            div:nth-child(2) {
                flex: 1;
                font-size: 15px;
                color: @blackColor7;
            }
            > div:nth-child(3) {
                flex: 1;
                width: 100%;
                .flexAroundCenter();
                font-size: 12px;
                color: @blackColor5;
                span:nth-child(3) {
                    margin: 0 4px;
                }
                img {
                    width: 15px;
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>
